<template>
  <section class="home-list">
    <div class="home-list-con cl">
      <h4>{{ title }}</h4>
      <div>
        <div
          v-for="item in type == 1 ? hotRecommend : newRecommend"
          :key="item.id"
        >
          <router-link
            :to="{
              path: '/details',
              query: {
                id: item.id,
              },
            }"
          >
            <img :src="host + item.image" alt="" title="点击进入详情页" />
          </router-link>
          <h4>{{ item.name }}</h4>
          <div>
            <p>￥{{ item.price }}</p>
            <button @click="addToCart(item.id)">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { mapState } from "vuex";
import config from "../../../config";
import { addToCartApi } from "../../../api";
export default {
  name: "Recommend",
  props: ["title", "type"],
  data() {
    return {
      host: config.host,
    };
  },
  computed: {
    ...mapState("goods", ["hotRecommend", "newRecommend"]),
  },
  methods: {
    addToCart(goods_id) {
      addToCartApi(
        (response) => {
          if (response.data.status === 1) {
            this.$bus.$emit("showTips", "添加购物车成功！");
            // 重新获取购物车长度
            this.$store.dispatch("user/getCartLen");
            // 提示信息
          }
        },
        (err) => {
          console.log(err);
        },
        { goods_id, amount: 1 }
      );
    },
  },
  mounted() {
    if (this.type === 1) {
      this.$store.dispatch("goods/getHotRec");
    } else if (this.type === 2) {
      this.$store.dispatch("goods/getNewRec");
    }
  },
};
</script>

<style lang="stylus" scoped>
.home-list {
  margin-top: 100px;
  width: 100%;
  background-color: #f8f8f8;

  .home-list-con {
    width: 80%;
    min-width: 800px;
    margin: 0 auto;
    padding: 20px 0 30px;

    &>h4 {
      border-left: 4px solid #fe4d1b;
      font-size: 18px;
      line-height: 30px;
      padding-left: 20px;

      a {
        text-decoration: none;
        color: #999;
      }
    }

    &>div {
      width: 100%;
      display: flex;
      margin-top: 10px;
      justify-content: space-between;

      &>div {
        width: 196px;
        background-color: #fff;
        padding-bottom: 6px;

        a {
          text-decoration: none;
          color: #999;
        }

        img {
          width: 100%;
        }

        h4 {
          margin-left: 6px;
          font-size: 14px;
          line-height: 24px;
        }

        div {
          display: flex;
          justify-content: space-between;
          padding: 0 6px;
        }

        p {
          font-size: 12px;
          color: #fe4d1b;
        }

        button {
          padding: 4px 6px;
          border: none;
          border-radius: 4px;
          margin-right: 6px;
          background-color: #fe4d1b;
          color: #fff;
          cursor: pointer;
        }

        &:hover {
          outline: 2px solid #fe4d1b;
        }
      }
    }
  }
}
</style>